<template>
	<view>
		<view class="header">
			<view class="nav">
				<view class="navBar" v-for="(item, index1) in navList" :key="index1">
					<view :class="{'active':isActive == index1}" @click="checked(index1)">
						{{item.title}}
					</view>
				</view>
			</view>
		</view>
		<view class="newActivity" v-if="isActive == 0">
			<view class="item">
				<label>活动类型</label>
				<view>
					<picker @change="bindPickerChange" :value="index" :range="array" :range-key="name" class="type">
						<view>{{array[index].name}}</view>
					</picker>
				</view>
				<image src="@/static/icon/jiantou.png"></image>
			</view>
			<view class="item">
				<label>活动标题</label>
				<input placeholder="请填写活动标题" type="text" v-model="biaoti" class="input" placeholder-class="place"/>
				<image src="@/static/icon/jiantou.png"></image>
			</view>
			<view class="item">
				<label>活动简介</label>
				<input type="text" placeholder="活动简介活动简介活动简介" v-model="intro" class="input" placeholder-class="place"/>
				<image src="@/static/icon/jiantou.png"></image>
			</view>
			<view class="item">
				<label>活动开始时间</label>
				<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange" class="date">
					<view>{{date}}</view>
				</picker>
				<image src="@/static/icon/jiantou.png"></image>
			</view>
			<view class="item">
				<label>活动结束时间</label>
				<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange" class="date">
					<view>{{date}}</view>
				</picker>
				<image src="@/static/icon/jiantou.png"></image>
			</view>
			<view class="item">
				<label>活动对象</label>
				<view style="font-size: 26rpx;margin-left: 416rpx;">全部用户</view>
				<image src="@/static/icon/jiantou.png"></image>
			</view>
		</view>
	    <view v-if="isActive == 1">
			
		</view>
	</view>
</template>
<script>
function getDate(type){
	const date = new Date();
	let year = date.getFullYear();
	let month = date.getMonth() + 1;
	let day = date.getDate();
	
	if(type === 'start'){
		year = year - 10;
	}else if(type === 'end'){
		year = year + 10
	}
	month = month > 9 ? month: '0' + month;
	day = day > 9 ? day: '0' + day
	return `${year},${month},${day}`
}
export default {
	data(){
		return {
			isActive:0,
			navList:[
				{
					index:0,
					title:'新建活动'
				},
				{
					index:1,
					title:'现有活动'
				},
				{
					index:2,
					title:'历史活动'
				}
			],
			index:2,
			array:[
				{
					name:'活动类型一'
				},
				{
					name:'活动类型二'
				},
				{
					name:'活动类型三'
				}
			],
			biaoti:'',
			intro:'', //活动简介
			date: getDate({
				format: true
			}),
			startDate: getDate('start'),
			endDate: getDate('end')
		}
	},
	methods:{
		checked(index1){
			this.isActive = index1
		},
		bindPickerChange:function(e){
			this.index = e.detail.value
		},
	    bindDateChange: function(e){
			this.date=e.detail.value
	    }
	}
}
</script>

<style>
.header {
	width: 100%;
	height: 140rpx;
	background: #FEB140;
	position: relative;
}
.nav {
	width: 650rpx;
	margin-left: 50rpx;
	margin-right: 50rpx;
	padding-top: 42rpx;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
.navBar {
	height: 60rpx;
	line-height: 60rpx;
}
.active {
	position: relative;
}
.active::after {
	content: '';
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	position: absolute;
	width: 60rpx;
	height: 6rpx;
	background: #000000;
}
.newActivity {
	width: 750rpx;
	height: 1039rpx;
	background: #FFFFFF;
	border-radius: 30rpx 30rpx 0rpx 0rpx;
	position: absolute;
	top: 118rpx;
	left: 0;
}
.item {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin: 40rpx 30rpx 0rpx 40rpx;
	border-bottom: 2rpx solid #E5E5E5;
	padding-bottom: 40rpx;
}
.type {
	font-size: 26rpx;
	margin-left: 400rpx;
}
.item label {
	font-size: 28rpx;
	font-family: Alibaba PuHuiTi;
	font-weight: 400;
	color: #1B1B1B;
}
.item image {
	width: 15rpx;
	height: 27rpx;
	margin-left: auto;
}
.input {
	width: 180rpx;
	margin-left: 355rpx;
}
.place {
	font-size: 26rpx;
	color: #999999;
}
.date {
	font-size: 26rpx;
	font-family: Alibaba PuHuiTi;
	font-weight: 400;
	color: #1B1B1B;
	margin-left: 320rpx;
}
</style>